import React, { useState } from 'react';
import styles from './hero.less';
import { QrcodeOutlined } from '@ant-design/icons';
import qq from '@/assets/images/login/qq.png';

const Page = () => {
  const [isLogin, setLogin] = useState(false);

  const handleJumpHome = () => {
    console.log(8888);
  };

  return (
    <div className={styles.main}>
      {/* 登陆 */}
      <div className={styles.loginPanel}>
        <div className={styles.header}>
          <QrcodeOutlined style={{ fontSize: 20 }} />
        </div>
        <div className={styles.avatar}>
          <img src={qq} alt="" onClick={handleJumpHome} />
        </div>
        <div className={styles.inputArea}>
          <div className={styles.inputItem}>
            <input type="text" placeholder="输入用户名" />
          </div>
          <div className={styles.inputItem}>
            <input type="password" placeholder="输入密码" />
          </div>
        </div>
      </div>

      <div className={isLogin ? styles.active : styles.switchWrapper}>
        <div className={styles.btn} onClick={() => setLogin(!isLogin)}>
          <div className={styles.text}>去登录</div>
          <div className={styles.text}>去注册</div>
        </div>
      </div>
    </div>
  );
};

export default React.memo(Page);
